<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      :safeAreaInsetBottom="false"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="top">
          <view class="title">{{ title }}</view>
        </view>
        <view class="box">
          <scroll-view scroll-y>
            <view
              class="list-item"
              :class="[
                {
                  'list-item--active':
                    $data.target &&
                    $data.target.complaintCategoryId ===
                      item.complaintCategoryId,
                },
              ]"
              v-for="(item, index) of list"
              :key="index"
              @tap="onCheck(item)"
            >
              {{ item.categoryName }}
            </view>
          </scroll-view>
        </view>
        <view class="confirm">
          <view class="common_btn confirm_btn" @tap="onConfirm">确定</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import BasicConfig from "@/utils/config";
import { ImgAddressColor } from "../../../utils/iconMap";
const $emit = defineEmits(["update:show", "close", "confirm"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "选择投诉目标",
  },
  list: {
    type: Array,
    default: [],
  },
});
const $data = reactive({
  target: null,
});
const onCheck = (item) => {
  $data.target = item;
};
const onConfirm = () => {
  if (!$data.target) {
    BasicConfig.toast($props.title);
    return;
  }
  $emit("confirm", $data.target);
  close();
};
const close = () => {
  $emit("update:show", false);
};
const open = () => {};
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx 30rpx 0 0 !important;
    max-height: 60vh;
  }
  .content {
    background: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    height: 100%;
    // padding-bottom: 300rpx;
    overflow-y: auto;
    position: relative;
    scroll-view {
      height: 40vh;
      padding: 30rpx;
      //   background: green;
    }
    .top {
      background: #ffffff;
      position: sticky;
      top: 0;
      z-index: 9999;
      border-radius: 30rpx 30rpx 0 0 !important;
      .title {
        background: #ffffff;
        padding: 30rpx;
        font-size: 36rpx;
        border-bottom: 1px solid #f0f0f0;
        text-align: center;
      }
    }
    .box {
      .list-item {
        width: 100%;
        text-align: center;
        background: #f7f8fa;
        color: #111111;
        padding: 20rpx;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
      }
      .list-item--active {
        background: #e4f9f9;
        border: 1px solid $main-color;
        color: $main-color;
      }
    }
    .confirm {
      width: 100%;
      //   margin-top: 30rpx;
      padding: 30rpx;
      background: #ffffff;
      z-index: 9999;
      position: sticky;
      bottom: 0;
      &_btn {
        width: 100%;
      }
    }
  }
}
</style>
